import { observer } from 'mobx-react-lite'
import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { storeAll } from '@/store'

const ParkingType: React.FC = () => {
	const chartRef = useRef<HTMLDivElement>(null)
	const { carsStore: { cars }, parkingLotTypeStore: { parkingLotType }, parkingStore: { parking } } = storeAll
	const indicator = parkingLotType.map(item => {
		return {
			text: item.notes,
			max: parking.filter(item1 => item1.type === item.id).length
		}
	})
	const value: number[] = parkingLotType.map(item => cars.filter(item1 => item1.type === item.notes).length)

	useEffect(() => {
		if (!chartRef.current) return
		const chart = echarts.init(chartRef.current)
		const lineStyle = {
			width: 1,
			opacity: 0.5
		};
		const option: any = {
			backgroundColor: '#161627',
			title: {
				text: '车位占比统计',
				left: 'left',
				textStyle: {
					color: '#eee'
				}
			},
			tooltip: {
				trigger: 'item',
			},
			radar: {
				indicator,
				shape: 'circle',
				splitNumber: 5,
				axisName: {
					formatter: function (value: any, indicator: any) {
						return `【${value}(${indicator.max})】`
					},
					color: 'rgb(238, 197, 102)'
				},
				splitLine: {
					lineStyle: {
						color: [
							'rgba(238, 197, 102, 0.1)',
							'rgba(238, 197, 102, 0.2)',
							'rgba(238, 197, 102, 0.4)',
							'rgba(238, 197, 102, 0.6)',
							'rgba(238, 197, 102, 0.8)',
							'rgba(238, 197, 102, 1)'
						].reverse()
					}
				},
				splitArea: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(238, 197, 102, 0.5)'
					}
				}
			},
			series: [
				{
					type: 'radar',
					lineStyle: lineStyle,
					data: [
						{
							value,
							tooltip: {
								formatter: function (params: any) {
									return '车辆占比类型';
								}
							},
							symbol: 'pin',
							symbolSize: 12,
							lineStyle: {
								type: 'dashed'
							},
							label: {
								show: true,
								formatter(params: any) {
									return params.value
								}
							}
						},
					],
					symbol: 'none',
					itemStyle: {
						color: '#F9713C'
					},
					areaStyle: {
						opacity: 0.1
					}
				}
			]
		};

		chart.setOption(option);

		return () => {
			// myChart.dispose() 销毁实例。实例销毁后无法再被使用
			chart.dispose()
		}
	}, [indicator, value])
	return <div ref={chartRef} style={{ width: "620px", height: "400px" }}></div>
}

export default observer(ParkingType)